<template>
  <div class="sms-send-page">
    <div class="remainder">
      <h3>当前余额(条)</h3>
      <span>{{ balance }}</span>
    </div>

    <AreaTitleWarp :title="'发送对象'"></AreaTitleWarp>
    <el-button type="primary" @click="dialogVisible = true">批量导入</el-button>

    <AreaWarp :padding="true">
      <div class="data">
        <ul class="userData">
          <li>所有号码</li>
          <li>有效号码</li>
          <li>无效号码</li>
          <li>重复号码</li>
        </ul>
        <ul class="userData">
          <li>{{ numberList.total || 0 }}</li>
          <li>{{ numberList.validNum || 0 }}</li>
          <li>{{ numberList.invalidNum || 0 }}</li>
          <li>{{ numberList.duplicateNum || 0 }}</li>
        </ul>
        <ul class="userData clean" v-if="delFlag">
          <li>{{ ' ' }}</li>
          <li>{{ ' ' }}</li>
          <li>{{ numberList.invalidNum == 0 ? '' : '已清除' }}</li>
          <li>{{ numberList.duplicateNum == 0 ? '' : '已清除' }}</li>
        </ul>
        <BtnWarp>
          <el-button v-if="delFlag" icon="el-icon-delete" type="primary" @click="emptyNumber">一键清空</el-button>
          <el-button v-else icon="el-icon-delete" disabled type="primary">一键清空</el-button>
        </BtnWarp>
      </div>
    </AreaWarp>

    <AreaTitleWarp :title="'短信内容'"></AreaTitleWarp>
    <el-button type="primary" @click="selectTemplate">选择模板</el-button>

    <AreaWarp :padding="true">
      <div class="templateContent">
        <el-input
          type="textarea"
          :rows="10"
          placeholder="请输入内容"
          v-model="textarea"
          @input="descInput"
        ></el-input>
        <div class="tips">
          <span>已输入{{txtVal}}/350个字</span>
          <span>注意：只可修改链接，修改正文将无法发送</span>
        </div>
      </div>
    </AreaWarp>

    <el-button type="primary" @click="submit">提交发送</el-button>

    <!-- 批量导入弹窗 -->
    <el-dialog
      title="批量导入"
      :visible.sync="dialogVisible"
      width="50%"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :modal-append-to-body="false"
    >
      <div class="dialog-body">
        <div class="upload">
          <el-upload
            class="upload-demo"
            ref="upload"
            :action="UploadUrl()"
            :limit="1"
            :file-list="fileList"
            :before-upload="beforeUpload"
          >
            <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
            <el-button size="small" type="success" @click="downLoad">下载模板</el-button>
            <div slot="tip" class="el-upload__tip">支持xls/txt格式,上传文件内容请和模板一致</div>
            <div slot="tip" class="el-upload-list__item-name">{{fileName}}</div>
          </el-upload>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="editCancel">取 消</el-button>
        <el-button type="primary" @click="editSure">上 传</el-button>
      </div>
    </el-dialog>

    <!-- 选择模板弹窗 -->
    <el-dialog
      title="选择模板"
      :visible.sync="tempalteVisible"
      width="50%"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :modal-append-to-body="false"
    >
      <div class="dialog-body">
        <el-table
          :data="templateList"
          style="width: 100%"
          class="pub-table"
          header-row-class-name="pub-table-header-row"
          header-cell-class-name="pub-table-header-cell"
          tooltip-effect="dark"
        >
          <el-table-column prop="templateContent" label="模板内容"></el-table-column>
          <el-table-column prop="id" label="提醒">
            <template slot-scope="scope">
              <el-button type="text" size="small" @click="select(scope.row)">选择</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import axios from "axios";

export default {
  data() {
    return {
      balance: "",
      textarea: "",
      txtVal: 0,
      dialogVisible: false,
      tempalteVisible: false,
      fileList: [],
      files: null,
      numberList: {
        mobiles: [],
        total: "",
        validNum: "",
        invalidNum: "",
        duplicateNum: ""
      },
      delFlag: false,
      templateList: [],
      fileName: "",
      tempId: "",
      channelId: ""
    };
  },
  methods: {
    //获取用户余额
    getBalance() {
      let that = this;
      let account = that.localData("get", "login_user").account;
      that.ajaxJson({
        url: "/customerManage/balance",
        data: {
          account
        },
        success: function(res) {
          if (res.code == "0") {
            that.balance = res.data.balance;
          }
        }
      });
    },
    //下载模板
    downLoad() {
      let that = this;
      let url = that.host + "/sms/template";
      window.open(url);
    },
    //上传文件地址
    UploadUrl() {
      let that = this;
      let url = that.host + "/sms/batchImport";
      return url;
    },
    //上传前文件校验
    beforeUpload(file) {
      let that = this;
      that.files = file;
      const extension = that.files.name.split(".")[1] === "xls";
      const extension2 = that.files.name.split(".")[1] === "txt";
      if (!extension && !extension2) {
        that.showMsg("上传文件格式只能是txt/xls！", "warning");
        return;
      }
      that.fileName = that.files.name;
      return false; // 返回false不会自动上传
    },
    //确认取消
    editCancel() {
      let that = this;
      that.files = null;
      that.fileName = "";
      that.dialogVisible = false;
    },
    // 确认
    editSure() {
      let that = this;
      console.log(that.fileName);
      if (that.fileName == "") {
        that.showMsg("请选择要上传的文件！", "error");
        return;
      }
      let fileFormData = new FormData();
      fileFormData.append("file", that.files);
      axios({
        method: "post",
        url: that.host + "/sms/batchImport",
        data: fileFormData,
        headers: {
          "Content-Type": "multipart/form-data"
        }
      })
        .then(function(res) {
          if (res.data.code == "0") {
            that.showMsg("上传成功", "success");
            that.numberList = res.data.data;
            that.delFlag = true;
          }
        })
        .catch(function(error) {
          if (error.response) {
            let code = error.response.status;
            if (code == "404") {
              that.$message.error("接口不存在");
            } else {
              that.$message.error("服务器错误");
            }
          }
        });
      that.editCancel();
    },
    //一键清空
    emptyNumber() {
      let that = this;
      that.numberList = {
        mobiles: [],
        total: "",
        validNum: "",
        invalidNum: "",
        duplicateNum: ""
      };
      that.delFlag = false;
    },
    //选择模板
    selectTemplate() {
      let that = this;
      that.ajaxJson({
        url: "/channel/template/list",
        data: {},
        success: function(res) {
          if (res.code == "0") {
            that.templateList = res.data.list;
          }
          that.tempalteVisible = true;
        }
      });
    },
    //选择某条模板
    select(row) {
      let that = this;
      that.textarea = row.templateContent;
      that.tempId = row.id;
      that.channelId = row.channelId;
      that.tempalteVisible = false;
      that.descInput();
    },
    //模板内容字数
    descInput() {
      let that = this;
      that.txtVal = that.textarea.length;
    },
    //提交发送
    submit() {
      let that = this;
      let id = that.localData("get", "login_user").id;
      if (!that.textarea && !that.channelId && !that.tempId) {
        that.showMsg("请选择短信模板", "error");
        return;
      }

      that.ajaxJson({
        url: "/sms/batchSend",
        data: {
          id,
          tempId: that.tempId,
          mobiles: that.numberList.mobiles,
          content: that.textarea,
          channelId: that.channelId
        },
        success: function(res) {
          if (res.code == "0") {
            that.showMsg("提交成功，短信已发送", "success");
          }
        }
      });
    }
  },
  created() {
    let that = this;
    that.getBalance();
  }
};
</script>
<style lang="less">
.sms-send-page {
  .remainder {
    h3 {
      display: inline-block;
    }
    span {
      padding-left: 10px;
      font-weight: bold;
    }
  }
  .el-button {
    margin-bottom: 15px;
  }
  .data {
    margin-bottom: 20px;
    border: 1px solid #ddd;
    width: 50%;
    .el-button {
      float: left;
      margin-left: 10%;
    }
    .userData {
      display: flex;
      justify-content: space-around;
      align-items: center;
      li {
        width: 25%;
        font-weight: bold;
        list-style: none;
        height: 30px;
        text-align: center;
        line-height: 30px;
        font-size: 13px;
      }
    }
    .userData.clean{
      li{
        font-size: 12px;
        color:#ccc;
      }
    }
  }
  .templateContent {
    width: 50%;
  }
  .tips {
    margin: 10px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #333;
    font-size: 12px;
  }
}
</style>
